<#import "/spring.ftl" as spring />
<#import "/inspector-time-macros.ftl" as imacro />

<html>
<head>
	<title>addEditNonRecurringRule.ftl</title>
	
	<script src="${springMacroRequestContext.contextPath}/js/it-common.js" type="text/javascript"></script>
	
	<!-- Pop up calendar -->
	<link rel="styleSheet" href="${springMacroRequestContext.contextPath}/css/calendarPopup.css" type="text/css">
	<script src="${springMacroRequestContext.contextPath}/js/CalendarPopup.js"></script>
	<script src="${springMacroRequestContext.contextPath}/js/CalendarPopup-ext.js"></script>
	
	<script language="javascript">
		<!--
		
		function toggleEndDate(checkbox) {
			if (checkbox.checked) {
				show('endDate');
			} else {
				hide('endDate');
			}
		}
		
		function init() {
			toggleEndDate(document.forms[0].multipleDays);
		}
		
		window.onload=init;
		-->
	</script>
	
</head>

<body>

<div id="content">

	<#if command.id??>
		<#assign mode="edit" />
	<#else>
		<#assign mode="add" />
	</#if>
	
	<#if mode == "edit">
		<h1>EDIT TIMESLOT</h1>
		
		<p>Your are currently editing the timeslot described below:</p>
		
		<p>
		<#-- assign a new var name so we can use the common "details" include -->
		<#assign scheduleRule = command />
		<#include "/inspector/scheduleRule/include-scheduleRuleDetails.ftl" />
		</p>
		
	<#else>
		<h1>ADD TIMESLOT</h1>
		
		<p>A timeslot allows you to specify a period of time that you're available (or unavailable) for an inspection on a particular day. Individual timeslots will override conflicting time specified by a recurring timeslot. </p>
	</#if>
	
	
	<@imacro.listErrors "command" />
	
	<form method="post" name="timeslotForm">
	<#if mode=="edit">
		<@spring.formHiddenInput "command.id" />
	</#if>
	
	<input type="hidden" name="frequencyType" value="SINGLE_DAY" />
	
	
	<div class="databoxWrapper">
		<div class="databox">
		<h1>TIMESLOT DETAILS</h1>
			<table class="databoxLabelTable2Cols">
			
			<#if mode == "add">
			<tr>
				<th>DATE:</td>
				<td>
				
					<!-- Begin date fields -->
						<p>Please enter the date in which to apply the timeslot, using format MM/dd/yyyy. </p>

					    <b>START DATE:</b>
						<div class="calendarWidget">
							<@spring.formInput "command.startDate" 'style="width: 50%;"'/> <script>writeCalLink('document.timeslotForm.startDate', 'anchor1')</script>
						</div>
						
						<p><input type="checkbox" name="multipleDays" value="yes" onclick="toggleEndDate(this)" <#if RequestParameters.multipleDays??>checked</#if> class="checkbox" /> Apply to multiple days in a row </p>
						
						<div id="endDate">
							<b>END DATE:</b> 
							<div class="calendarWidget">
								<@spring.formInput "command.endDate" 'style="width: 50%;"'/> <script>writeCalLink('document.timeslotForm.endDate', 'anchor2')</script>
							</div>
						</div>
					<!-- End date fields -->
					
				</td>
			</tr>
			</#if>
			<tr>
				<th>START TIME:</td>
				<td class="databoxFreeForm"><@spring.formSingleSelect "command.startHour", hours/>:<@spring.formSingleSelect "command.startMinute", minutes/></td>
			</tr>
			<tr>
				<th>END TIME:</td>
				<td class="databoxFreeForm"><@spring.formSingleSelect "command.endHour", hours/>:<@spring.formSingleSelect "command.endMinute", minutes/></td>
			</tr>
			<tr>
				<th>ARE YOU AVAILABLE IN THIS TIMESLOT?</td>
				<td><@imacro.singleRadioButton "command.available"," YES" " NO" "&nbsp;&nbsp;" "class=radio"/></td>
			</tr>
		</table>
		</div>
	</div>
	
	<#if mode == "edit">
	    <input type="submit" value="SAVE TIMESLOT" class="formButton"/>&nbsp;&nbsp;&nbsp;<a href="deleteScheduleRule.html?inspectorId=${RequestParameters.inspectorId}&ruleId=${command.id}" class="formLink">-DELETE TIMESLOT-</a>&nbsp;&nbsp;&nbsp;<a href="viewScheduleRules.html?inspectorId=${RequestParameters.inspectorId}" class="formLink">-CANCEL-</a>
	    
	<#else>
		<input type="submit" value="ADD TIMESLOT" class="formButton"/>
	</#if>
	
	</form>
	
	
</div>
</body>
</html>